<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no" />
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="../c/aui.css" />
		<link rel="stylesheet" type="text/css" href="../c/suxiangw.css" / >
		<link rel="stylesheet" type="text/css" href="../c/animate.css" />
		<style>
			/*body {

			}*/
		</style>
	</head>
	<body>
		<div class="sx-ping-list" id="sx-view"><div id="loadingdi_huifu"><img src="../i/footer_progress.png" /></div></div>
		<script id="sx-list" type="text/x-dot-template">
			{{ for(var i=0,it=it.data; i < it.length; i++) { }}
			<div class="content" id="ping-id-{{= it[i].id}}" {{? _getPrefs('ping'+ it[i].id)}}style="display: none;"{{?}}>
				<img class="userimg" suxiangw-src="{{= it[i].user.img ? _img(it[i].user.img,'60',60) : '../i/touxiang.png'}}" src="../i/touxiang.png" tapmode onclick="_u({{= it[i].uid}})" />
				<div class="username" tapmode onclick="_u({{= it[i].uid}})">{{= it[i].user.username}}</div>
				<div class="text" tapmode onclick="setPlaceholder({{= it[i].id}},'{{= it[i].user.username}}');">
					<div class="user-text"><span class="_text">{{= _text(it[i].content) }}</span><span>{{= it[i].time}}</span></div>
				</div>
				<div class="zan" tapmode onclick="_zan({{= it[i].id}},1)" />
					<img src="../i/zan{{= it[i].user_zan?'-s':''}}.png" />
					<p>{{= it[i].zan_num ? it[i].zan_num : ''}}</p>
				</div>
				{{? _getPrefs('_config').config.app == 1}}
				<div class="jubao" tapmode onclick="jubao({{= it[i].id}})">举报</div>
				{{?}}
			</div>
			<!-- 回复开始 -->
			<div class="content-huifu" id="huifu-{{= it[i].id}}" data-page="1" {{? !it[i].huifu_num}}style="display: none;"{{?}}>
				<div id="sx-view-huifu-{{= it[i].id}}"></div>
				<div class="huifu_t l" tapmode onclick="ping_huifu_ajax({{= it[i].id}})">
					<span></span>展开<b data-num="{{= it[i].huifu_num}}">{{= it[i].huifu_num}}</b>条回复<i></i>
				</div>
				<div class="huifu_t r" style="display: none;" tapmode onclick="ping_huifu_show({{= it[i].id}},true);">
					<span></span>收起<i style="transform:rotate(180deg);"></i>
				</div>
				<div class="huifu_t b " style="display: none;margin-left:-2.5rem;">
					<div id="loadingdi_huifu-s"><img src="../i/footer_progress.png" /></div>
				</div>
			</div>
			<!-- 回复结束 -->
			{{ } }}
		</script>
		<!-- 回复列表模板 -->
		<script id="sx-list-huifu" type="text/x-dot-template">
			{{ for(var i=0,it=it.data; i < it.length; i++) { }}
			<div class="content animated fadeInDown" id="huifu-id-{{= it[i].id}}">
				<img class="userimg" suxiangw-src="{{= it[i].user.img ? _img(it[i].user.img,'60',60) : '../i/touxiang.png'}}" src="../i/touxiang.png" tapmode onclick="_u({{= it[i].uid}})" />
				<div class="username" tapmode onclick="_u({{= it[i].uid}})">
					{{= it[i].user.username }}
				</div>
				<div class="text">
					{{? it[i].huifu_uid }}
					<div class="user-huifu">回复<b tapmode onclick="_u({{= it[i].huifu_uid}})">{{= it[i].huifu_user.username }}</b>:</div>
					{{?}}
					<span style="padding-right: 0.5rem;" class="_text" tapmode onclick="setPlaceholder({{= it[i].ping_id}},'{{= it[i].user.username }}',{{= it[i].id}})">{{= _text(it[i].content) }}</span><span tapmode onclick="setPlaceholder({{= it[i].ping_id}},'{{= it[i].user.username }}',{{= it[i].id}})">{{= it[i].time }}</span>
				</div>
				<div class="zan" tapmode onclick="_zan({{= it[i].id}},2)" >
					<img src="../i/zan{{= it[i].user_zan?'-s':''}}.png" />
					<p>{{= it[i].zan_num ? it[i].zan_num : '' }}</p>
				</div>
			</div>
			{{ } }}
		</script>
		<!-- 回复模板结束 -->

	</body>
	<script type="text/javascript" src="../j/api.js"></script>
	<script type="text/javascript" src="../j/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		var UIChatBox,vid,ping_id,huifu_id;
		apiready = function() {
			// $(".closebtn").on("click",function(){
			// 	$(".pls").html("");
				
			// })
			_user = _getPrefs('_user');
			vid = api.pageParam['vid'];
			UIChatBox = api.require('UIChatBox');
			UIChatBox.addEventListener({
			    target: 'inputBar',
			    name: 'move'
			}, function(ret, err) {
			    if (ret) {
							if(ret.panelHeight){

							}else{
								UIChatBox.setPlaceholder({
							    placeholder: '有爱评论，说点儿好听的 ~'
								});
							}
			    } else {
			        console.log("move"+JSON.stringify(err));
			    }
			});
			api.parseTapmode();
			open();
			_list({url:'video/ping/vid/'+vid,loading:1});
			// 监听滚动
			api.addEventListener({
				name : 'scrolltobottom',
				extra : {
					threshold : 50
				}
			}, function(ret, err) {
				if (heigutgao == 1) {// heigutgao=1开启执行 0停止执行   防止连续滚动，等加载数据之后在进行滚动。
					pagenum += 1
					_list({url:'video/ping/vid/'+vid,page:pagenum});
				}
			});
		}
		//评论文本框样式设置
		function open() {
			UIChatBox.open({
				placeholder: '有爱评论，说点儿好听的 ~',
				maxRows: 4,
				emotionPath: _i + 'UIChatBox/emotion',
				styles: {
					inputBar: {
						borderColor: '#000',
						bgColor: '#000',
						textColor: '#000'
					},
					inputBox: {
						borderColor: '#000',
						bgColor: '#fff'
					},
					emotionBtn: {
						normalImg: _i + 'UIChatBox/emotionBtn.png'
					},
					keyboardBtn: {                      //JSON对象；键盘按钮样式
			        normalImg:  _i + 'UIChatBox/keyboardBtn.png'
			    },
					recordBtn: {
						normalBg: '#c4c4c4',
						activeBg: '#999999',
						color: '#000',
						size: 14
					},
					indicator: {
						target: 'both',
						color: '#c4c4c4',
						activeColor: '#9e9e9e'
					},
					sendBtn: {
						titleColor: '#fff',
						bg: '#000',
						activeBg: '#46a91e',
						titleSize: 14
					}
				}
			}, function(ret, err) {
				if (ret) {
					console.log(JSON.stringify(ret));
					// 模块打开成功
					if(ret.eventType == 'show'){

					}
					// 发布内容
					if(ret.eventType == 'send'){
						if(ret.msg){
							ping_add(ret.msg);
						}else{
							return _msg('请填写评论哦！')
						}
					}
				} else {
					console.log(JSON.stringify(err));
				}
			});
		}
		// 发布评论
		//  ping_id没有值评论作者，有值表示回复评论，
		function ping_add(content){
			var url = 'member/ping';
			if(ping_id){
				url = 'member/ping_huifu';
			}
			_ajax(url,function(ret,err){
				UIChatBox.closeKeyboard();
				UIChatBox.closeBoard();
				if(ret){
					console.log(JSON.stringify(ret));
					// 插入html评论和回复
					if(ping_id){
						// 	插入回复html
						huifu_html(ret.data);
					}else{
						//	插入评论html
						ping_html(ret.ret,content);
					}

					if(ret.ret){
						// 回复成功后 重置为评论作者
						if(ping_id){
							ping_id = 0;
							huifu_id = 0;
							UIChatBox.setPlaceholder({
								placeholder: '有爱评论，说点儿好听的 ~'
							});
						}
					}else{
						_msg(ret.err);
					}
				}else{
					_alert(JSON.stringify(err));
				}
			},{vid:vid,content:content,ping_id:ping_id,huifu_id:huifu_id});
		}
		// 插入评论html模板
		function ping_html(id,content){

			var data = {
				"user":{
					"username":_user.username,
					"id":_user.id,
					"img":_user.img
				},
				"uid":_user.id,
				"content":_text(content),
				"id":id,
				"vid":vid,
				"huifu_num":0,
				"time":'刚刚',
				"zan_num":0,
				"backgroundColor":"#CC9A5B"
			};
			var ret = {"data":[data]};
			//渲染模版
			var evalData = doT.template($api.html($api.byId('sx-list')));
			$api.prepend($api.byId('sx-view'), evalData(ret));
			api.parseTapmode();
			_imageCache();
			_zhen();
			api.pageUp({top:true});
		}
		// 插入回复html模板
		function huifu_html(data){
			var ret = {"data":[data]};
			console.log("huifu_html:"+JSON.stringify(ret));
			//渲染模版
			var evalData = doT.template($api.html($api.byId('sx-list-huifu')));
			$api.prepend($api.byId('sx-view-huifu-'+data.ping_id), evalData(ret));
			_imageCache()
			// 显示收起

			var _this = $api.dom('#huifu-'+ping_id+' .l b');
			var num = parseInt($api.attr(_this,'data-num'));

			if(num){
			}else{
				$api.removeAttr($api.dom('#huifu-'+data.ping_id), 'style');
				ping_huifu_hide(data.ping_id);
			}
			num = num+1;
			$api.attr(_this,'data-num',num)
			$api.text(_this,num);

			api.parseTapmode();
			_zhen();
		}

		// 回复评论的输入框
		function setPlaceholder(id,username,hid){
			ping_id = id;		// 评论id
			huifu_id = hid;	// 回复id
			UIChatBox.setPlaceholder({
			    placeholder: '回复@'+username
			});
			UIChatBox.popupKeyboard();
		}
		// 加载回复列表
		// ping_id 评论id
		function ping_huifu_ajax(ping_id){
			// 显示加载
			ping_huifu_loading(ping_id);
			var page = parseInt($api.attr($api.byId('huifu-'+ping_id),'data-page'));
			_ajax('video/ping_huifu?page='+page,function(ret,err){
				if(ret){
				//	console.log(JSON.stringify(ret));
					// 移除现有重复回复内容
					for (var i = 0; i < ret.data.length; i++) {
						$api.remove($api.dom('#huifu-id-'+ret.data[i].id));
					}
					// 移除结束
					//渲染模版
					var evalData = doT.template($api.html($api.byId('sx-list-huifu')));
					$api.append($api.byId('sx-view-huifu-'+ping_id), evalData(ret));
					_imageCache();
					// 显示展开数量
					var num = ret.total - (ret.per_page*ret.current_page);
					$api.text($api.dom('#huifu-'+ping_id+' .l b'),num);
					$api.attr($api.dom('#huifu-'+ping_id+' .l b'),'data-num',ret.total);
					if(page >= ret.last_page){
						// 加载最后一页，显示收起
						ping_huifu_hide(ping_id);
						// 分页变量重置
						page = 0;
					}else{
						// 没加载最后一页，显示展开
						ping_huifu_show(ping_id);
					}
					$api.attr($api.byId('huifu-'+ping_id),'data-page',page+1);
					api.parseTapmode();
				//	console.log("page:"+page +" last_page:"+ret.last_page);
				}else{
					_alert(JSON.stringify(err));
				}
			},{ping_id:ping_id})
		}
		// 显示图标
		function ping_huifu_show(ping_id,html){
			if(html){
				$api.html($api.byId('sx-view-huifu-'+ping_id), '');
			}
			$api.removeCls($api.dom('#huifu-'+ping_id+' .l'), 'aui-hide');
			$api.removeCls($api.dom('#huifu-'+ping_id+' .r'), 'aui-show');
			$api.removeCls($api.dom('#huifu-'+ping_id+' .b'), 'aui-show');
		}
		// 显示收起
		function ping_huifu_hide(ping_id){

			$api.addCls($api.dom('#huifu-'+ping_id+' .r'), 'aui-show');
			$api.removeCls($api.dom('#huifu-'+ping_id+' .r'), 'aui-hide');

			$api.addCls($api.dom('#huifu-'+ping_id+' .l'), 'aui-hide');
			$api.removeCls($api.dom('#huifu-'+ping_id+' .l'), 'aui-show');

			$api.removeCls($api.dom('#huifu-'+ping_id+' .b'), 'aui-show');

			// 显示展开数量
			var _this = $api.dom('#huifu-'+ping_id+' .l b');
			var num = parseInt($api.attr(_this,'data-num'));
			$api.text(_this,num);



		//	$api.removeCls($api.dom('#huifu-'+ping_id+' .b'), 'aui-show');
		}
		// 显示加载
		function ping_huifu_loading(ping_id){
			$api.addCls($api.dom('#huifu-'+ping_id+' .b'), 'aui-show');
			$api.addCls($api.dom('#huifu-'+ping_id+' .l'), 'aui-hide');
			$api.removeCls($api.dom('#huifu-'+ping_id+' .r'), 'aui-show');
		}
		// 举报
		function jubao(id){
			var b = ['低俗', '政治敏感','违法犯罪','广告营销','侮辱谩骂','未成年人不当行为','引人反感不适','其他'];
			api.actionSheet({
			    title: '请选择举报内容',
			    cancelTitle: '取消',
			    buttons: b
			}, function(ret, err) {
			    var index = ret.buttonIndex;
			    if(index == b.length){
			    	api.prompt({
					    buttons: ['确定', '取消'],
					    title:'描述举报理由（250字内）'
					}, function(ret, err) {
					    var index = ret.buttonIndex;
					    var text = ret.text;
					    if(index == 1){
					    	if(text){
					    		jubao_ajax(id)
					    	}else{
					    		_alert('内容不能为空')
					    	}
					    }
					});
			    }else if(index != b.length+1){
			    	jubao_ajax(id)
			    }
			});
		}
		function jubao_ajax(id){
			$('#ping-id-'+id).remove();
			_msg('举报成功');
			_setPrefs('ping'+id,id);
		}

	</script>

</html>
